<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/1.0.css">
   <link rel="stylesheet" href="./images/font/iconfont.css">
    <style>
      /* .ulx li a{
        text-decoration: none;
        color: #909399;
      } */
    </style>
</head>
<body>
    
   
    <!-- 头部导航栏 -->
    <header class="hearder">

        <div class="container">
            <nav class="nav1">
                <div class="logo">
                    <img src="images/logo.png" alt="">
                </div>
                <ul class="ulx clearfix">
                    <li class="con">首页</li>
                    <li>歌单</li>
                    <li>歌手</li>
                    <li>VIP</li>
                    <li>音乐盒</li>
                    <li>客户端</li>
                </ul>
                <div class="nav-rigth">
                    <div>
                        <input type="text" placeholder="请输入歌名、歌词、歌手或专辑">
                        <span class="iconfont icon-fangdajing"></span>
                    </div>
                    <span>登录/注册</span>
                </div>
            </nav>
        </div>
    </header>
    <!-- 头部轮播图 -->
    <div class="man-heard">
        <div class="container">
            <div class="man-z">         
                <div class="box">
                    <div class="heard">
                        <div>
                          <img src="./images/lb1.0.jpg" alt="">
                        </div>  
                        <div class="asd">
                            <img src="./images/lb2.0.jpg" alt="">
                        </div> 
                        <div>
                            <img src="./images/lb3.0.jpg" alt="">
                        </div> 
                        <div>
                            <img src="./images/lb4.0.jpg" alt="">
                        </div> 
                        <div>
                            <img src="./images/lb5.0.jpg" alt="">
                        </div> 
                        <div>
                            <img src="./images/lb6.0.jpg" alt="">
                        </div> 
                    </div>
                </div>
                <div class="left-her">
                    <span class="iconfont icon-zuoyoujiantou-copy
                    "></span>
                </div>
                <div class="right-her">
                    <span class="iconfont icon-zuoyoujiantou"></span>
                </div>  
            </div>
                    
        </div>
    </div>
    <!-- 中部导航栏 -->
    <div class="container">
        <div class="navge">
            <ul class="clearfix">
               <li>流行</li>
               <li>摇滚</li>
               <li>民谣</li>
               <li>电子</li>
               <li>影视原声</li>
               <li>ACG</li>
               <li>新世纪</li>
               <li>爵士</li>
               <li>古典</li>
               <li>乡村</li>
               <li>说唱</li>
               <li class="n-rigth">更多</li>
            </ul>
           
        </div>    
    </div>
    <!-- 中部热门歌单 -->
    <div class="man-gedan">
        <div class="container">
            <div class="gedan">
                <div class="man-gnav">
                    <h2>热门歌单</h2>
                    <span>更多</span>
                </div>
                <div class="man-ge">
                    <div class="tul">
                        <ul class="clearfix">
                            <li>
                                <div class="img">
                                    <img src="./images/gd01.jpg" alt="">
                                    <span></span>
                                </div>
                            
                                <h3>温柔男声 | 耳边的缠绵缱绻</h3>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./images/gd02.jpg" alt="">
                                    <span></span>
                                </div>
                             
                                <h3>薛之谦 | 情歌路上的蜕变</h3>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./images/gd03.jpg" alt="">
                                    <span></span>
                                </div>
                             
                                <h3>嘻哈精选 | 听到这些旋律都跳起来</h3>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./images/gd04.jpg" alt="">
                                    <span></span>
                                </div>
                                
                                <h3>国剧崛起，那些好剧里的好歌</h3>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./images/gd05.jpg" alt="">
                                    <span></span>
                                </div>
                                
                                <h3>国剧崛起，那些好剧里的好歌</h3>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./images/gd06.jpg" alt="">
                                    <span></span>
                                </div>
                               
                                <h3>收藏起来，这些卡点音乐BGM超燃！</h3>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./images/gd07.jpg" alt="">
                                    <span></span>
                                </div>
                              
                                <h3>吴克羣</h3>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./images/gd08.jpg" alt="">
                                    <span></span>
                                </div>
                               
                                <h3>吴克羣</h3>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./images/gd09.jpg" alt="">
                                    <span></span>
                                </div>
                              
                                <h3>吴克羣</h3>
                            </li>
                            <li>
                                <div class="img">
                                    <img src="./images/gd10.jpg" alt="">
                                    <span></span>
                                </div>
                              
                                <h3>吴克羣</h3>
                            </li>
                        </ul>
                        <ol>
                            <li class="df"></li>
                            <li></li>
                        </ol>
                    </div>
                    <div class="ge-left"><span class="iconfont icon-zuoyoujiantou-copy"></span></div>
                    <div class="ge-right"><span class="iconfont icon-zuoyoujiantou "></span></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 新歌首发 -->
    <div class="xin-ge">
        <div class="container">
          <div class="xin-gedan">
            <div class="man-gnav">
                <h2>新歌首发</h2>
                <span>更多</span>
            </div>
            <div class="xin-dan">
                <ul class="xin">
                    <li>
                        <div class="xin-left">
                            <img src="./images/gd20.jpg" alt="">
                        </div>

                        <div class="yuan"></div>

                        <div class="xin-right">
                            <h4>慕容杰伦与美如</h4>
                            <p>李小冬</p>
                        </div>
                    </li>
                    <li>
                        <div class="xin-left">
                            <img src="./images/gd21.jpg" alt="">
                        </div>

                        <div class="yuan"></div>

                        <div class="xin-right">
                            <h4>慕容杰伦与美如</h4>
                            <p>李小冬</p>
                    </li>
                    <li>
                        <div class="xin-left">
                            <img src="./images/gd22.jpg" alt="">
                        </div>

                        <div class="yuan"></div>

                        <div class="xin-right">
                            <h4>慕容杰伦与美如</h4>
                            <p>李小冬</p>
                    </li>
                    <li>
                        <div class="xin-left">
                            <img src="./images/gd23.jpg" alt="">
                        </div>

                        <div class="yuan"></div>

                        <div class="xin-right">
                            <h4>慕容杰伦与美如</h4>
                            <p>李小冬</p>
                    </li>
                    <li>
                        <div class="xin-left">
                            <img src="./images/gd24.jpg" alt="">
                        </div>

                        <div class="yuan"></div>

                        <div class="xin-right">
                            <h4>慕容杰伦与美如</h4>
                            <p>李小冬</p>
                    </li>
                    <li>
                        <div class="xin-left">
                            <img src="./images/gd25.jpg" alt="">
                        </div>

                        <div class="yuan"></div>

                        <div class="xin-right">
                            <h4>慕容杰伦与美如</h4>
                            <p>李小冬</p>
                    </li>

                    <li>
                        <div class="xin-left">
                            <img src="./images/gd26.jpg" alt="">
                        </div>

                        <div class="yuan"></div>

                        <div class="xin-right">
                            <h4>慕容杰伦与美如</h4>
                            <p>李小冬</p>
                        </div>
                    </li>
                    <li>
                        <div class="xin-left">
                            <img src="./images/gd27.jpg" alt="">
                        </div>

                        <div class="yuan"></div>

                        <div class="xin-right">
                            <h4>慕容杰伦与美如</h4>
                            <p>李小冬</p>
                    </li>
                    <li>
                        <div class="xin-left">
                            <img src="./images/gd28.jpg" alt="">
                        </div>

                        <div class="yuan"></div>

                        <div class="xin-right">
                            <h4>慕容杰伦与美如</h4>
                            <p>李小冬</p>
                    </li>
                    <li>
                        <div class="xin-left">
                            <img src="./images/gd29.jpg" alt="">
                        </div>

                        <div class="yuan"></div>

                        <div class="xin-right">
                            <h4>慕容杰伦与美如</h4>
                            <p>李小冬</p>
                    </li>
                    <li>
                        <div class="xin-left">
                            <img src="./images/gd30.jpg" alt="">
                        </div>

                        <div class="yuan"></div>

                        <div class="xin-right">
                            <h4>慕容杰伦与美如</h4>
                            <p>李小冬</p>
                    </li>
                    <li>
                        <div class="xin-left">
                            <img src="./images/gd31.jpg" alt="">
                        </div>

                        <div class="yuan"></div>

                        <div class="xin-right">
                            <h4>慕容杰伦与美如</h4>
                            <p>李小冬</p>
                    </li>
                </ul>
                
            </div>
            <ol class="clearfix">
                <li class="ad"></li>
                <li></li>
            </ol>
            <div class="dan-left">
                <span class="iconfont icon-zuoyoujiantou-copy"></span>
            </div>
            <div class="dan-right">
                <span class="iconfont icon-zuoyoujiantou"></span>
            </div>
          </div>
           
        </div>
    </div>


    <!-- 歌手 -->
    <div class="geshou">
        <div class="container">
            <div class="geshou-man">
                <div class="man-gnav">
                    <h2>歌手</h2>
                    <span>更多</span>
                </div>
                <div class="gs">
                    <ul>
                        <li>
                            <div class="gsd">
                                <img src="./images/gd39.jpg" alt="">
                            </div>
                            <p>林志炫</p>
                        </li>
                        <li>
                            <div class="gsd">
                                <img src="./images/gd48.jpg" alt="">
                            </div>
                            <p>许嵩</p>
                        </li>
                        <li>
                            <div class="gsd">
                                <img src="./images/re05.jpg" alt="">
                            </div>
                            <p>胡彦斌</p>
                        </li>
                        <li>
                            <div class="gsd">
                                <img src="./images/gs04.jpg" alt="">
                            </div>
                            <p>iri</p>
                        </li>
                        <li>
                            <div class="gsd">
                                <img src="./images/gs05.jpg" alt="">
                            </div>
                            <p>雯雯</p>
                        </li>
                        <li>
                            <div class="gsd">
                                <img src="./images/gs03.jpg" alt="">
                            </div>
                            <p>何曼婷</p>
                        </li>
                    </ul>
                </div>
            </div>
           
        </div>
    </div>

    <!-- 精选视频 -->
    <div class="jingshi">
        <div class="container">
            <div class="jing-a">
                <div class="man-gnav">
                    <h2>精选视频</h2>
                    <span>更多</span>
                </div>
                <div class="content">
                    <ul class="clearfix">
                        <li>
                            <div class="img">
                                <img src="./images/js01.jpg" alt="">
                                <span></span>
                            </div>
                            <h2>国王密室</h2>
                            <h3>吴克羣</h3>
                        </li>
                        <li>
                            <div class="img">
                                <img src="./images/js02.jpg" alt="">
                                <span></span>
                            </div>
                            <h2>国王密室</h2>
                            <h3>吴克羣</h3>
                        </li>
                        <li>
                            <div class="img">
                                <img src="./images/js03.jpg" alt="">
                                <span></span>
                            </div>
                            <h2>国王密室</h2>
                            <h3>吴克羣</h3>
                        </li>
                        <li>
                            <div class="img">
                                <img src="./images/js04.jpg" alt="">
                                <span></span>
                            </div>
                            <h2>国王密室</h2>
                            <h3>吴克羣</h3>
                        </li>
                        <li>
                            <div class="img">
                                <img src="./images/js05.jpg" alt="">
                                <span></span>
                            </div>
                            <h2>国王密室</h2>
                            <h3>吴克羣</h3>
                        </li>
                        <li>
                            <div class="img">
                                <img src="./images/js06.jpg" alt="">
                                <span></span>
                            </div>
                            <h2>国王密室</h2>
                            <h3>吴克羣</h3>
                        </li>
                        <li>
                            <div class="img">
                                <img src="./images/js07.jpg" alt="">
                                <span></span>
                            </div>
                            <h2>国王密室</h2>
                            <h3>吴克羣</h3>
                        </li>
                        <li>
                            <div class="img">
                                <img src="./images/js08.jpg" alt="">
                                <span></span>
                            </div>
                            <h2>国王密室</h2>
                            <h3>吴克羣</h3>
                        </li>
                    </ul>
                </div>
                <ol class="clearfix">
                    <li class="df"></li>
                    <li></li>
                </ol>
                <div class="jing-left">
                    <span class="iconfont icon-zuoyoujiantou-copy"></span>
                </div>
                <div class="jing-right">
                    <span class="iconfont icon-zuoyoujiantou"></span>
                </div>
            </div>
        </div>
    </div>
    <!-- 推荐直播 -->
    <div class="zhibo">
        <div class="container">
            <div class="zbo">
                <div class="man-gna">
                    <h2>相关直播推荐</h2>
                    <span>你已经被我一个人包围</span>
                </div>
                <div class="b-shi">
                    <ul >
                        <li>
                           <p><span>&#8226;</span>直播中</span> </p>
                            <img src="./images/gd24.jpg" alt="">
                        </li>
                        <li>
                            <p><span>&#8226;</span> 直播中</p>
                            <img src="./images/gd25.jpg" alt="">
                        </li>
                        <li>
                            <p><span>&#8226;</span> 直播中</p>
                            <img src="./images/gd04.jpg" alt="">
                        </li>
                        <li>
                            <p><span>&#8226;</span> 直播中</p>
                            <img src="./images/gd19.jpg" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 脚 -->
    <footer>
        <div class="container">
            <div class="fot">
                <div class="fot-left">
                    <h4>下载千千客户端</h4>
                    <ul>
                        <li>
                            <span class="iconfont icon-anzhuoandroid"></span>
                            <span >Android版</span>
                            <div class="re">
                                <img src="./images/ad01.jpg" alt="">
                                <p>微信扫一扫</p>
                            </div>
                        </li>
                        <li>
                            <span class="iconfont icon-pingguoios
                            "></span>
                            <span>iphone版</span>
                            <div class="re">
                                <img src="./images/ad01.jpg" alt="">
                                <p>微信扫一扫</p>
                            </div>
                        </li>
                        <li>   
                            <span class="iconfont icon-windows-fill
                            "></span>
                            <span>Window版</span>
                        </li>
                        <li>
                            <span class="iconfont icon-line-Macpingguotaishiji"></span>
                            <span>MAC版</span>
                        </li>
                    </ul>
                </div>
                <div class="fot-zo">
                    <h4>关于千千</h4>
                    <ul>
                        <li>意见反馈</li>
                        <li>联系我们</li>
                        <li>DMH数字音乐发布平台</li>
                    </ul>
                </div>
                <div class="fot-right">
                    <h4>关注千千音乐</h4>
                    <ul>
                        <li>
                            <span class="iconfont icon-weibo"></span>
                            <span>关注微博</span>
                            <div class="re">

                            </li>
                        <li>
                            <span class="iconfont icon-weixin"></span>
                            <span>微信公众号</span>
                            <div class="re">
                                <img src="./images/ad01.jpg" alt="">
                                <p>微信扫一扫</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="foot-t">
            <div class="container">
                <div class="ft-d">
                    <p>
                        Copyright 2018 © .TAIHE MUSIC GROUP. 深圳太乐文化科技有限公司版权所有 [粤ICP备17102508号-2]
                    </p>  
                    <p>
                       信息网络传播视听许可证: 1910523  | <span></span> 粤公网安备: 44030502002309号 | 增值电信业务经营许可证: 粵B2-20180819 | 网络文化经营许可证号码: 粤网文[2018]0902-359号 
                    </p>
                    <p>
                        举报邮箱: jubao@taihe.com | 反馈中心
                    </p>
                </div>
            </div>
        </div>
    </footer>
   
    <script src="./js/jquery-3.5.1.js"></script>
    <script>
    //   console.log($(".ge-left"))  
    //    console.log( $(".man-ge>.tul>ul>li"))


    // 热门歌单
       var index = 0; //显示内容下标
        $(".tul ol li").click(function(){
            // 获取li下标
            index = $(this).index();
            toggleQQ(index);
        })
        $(".ge-left,.ge-right").click(function(){
            index = index==0?1:0;
            toggleQQ(index);
        })

        function toggleQQ(index){
            // 切换指示点
            $(".tul ol li").eq(index).addClass("df").siblings().removeClass("df");
            $(".tul ul").css("transform","translateX("+(index * -1220)+"px)");
        }

    // 新歌首发
        //  console.log($(".dan-left ,.dan-right"))  
        //  console.log( $(".xin"))
         var index_xin =0 ;
         $(".xin-gedan ol li").click(function(){
            // 获取li下标

            index_xin = $(this).index();
            $(".xin-gedan ol li").eq(index_xin).addClass("ad").siblings().removeClass("ad");
          
            // console.log( index_xin);
            xin_index( index_xin);

        })

        $(".dan-left ,.dan-right").click(function(){
            index_xin = index_xin==0?1:0;
            xin_index(index_xin);
         })
        
        function xin_index(index_xin){
            // 切换指示点
            $(".xin-gedan ol li").eq(index_xin).addClass("ad").siblings().removeClass("ad");
            $(".xin").css("transform","translateX("+(index_xin * -1200)+"px)");
            // console.log( (index_xin * 1200) )
        }

    // 精选视频

        // console.log($(".jing-left ,.jing-right"))  
        //  console.log( $(".content ul"))
         var index_jin =0 ;
         $(".jing-a ol li").click(function(){
            // 获取li下标

            index_jin = $(this).index();
            $(".jing-a ol li").eq(index_jin).addClass("df").siblings().removeClass("df");
          
            console.log( index_jin);
            jin_index(index_jin)

        })

        $(".jing-left ,.jing-right").click(function(){
            index_jin = index_jin==0?1:0;
            jin_index(index_jin)
         })
        
        function jin_index(index_jin){
            // 切换指示点
            $(".jing-a ol li").eq(index_jin).addClass("df").siblings().removeClass("df");
            $(".content ul").css("transform","translateX("+(index_jin * -1220)+"px)");
            // console.log( (index_jin * 1200) )
        }

    // 导航栏
    //   console.log(  $(".ulx>li")) 
        var daoli=0;
        $(".ulx>li").click(function(){
            // 获取li下标

            daoli = $(this).index();
            $(".ulx>li").eq(daoli).addClass("con").siblings().removeClass("con");
          
            // console.log( daoli);
           

        })

    // 轮播图
      console.log($(".left-her,.right-her"))  
      var bb =0

      $(".left-her,.right-her").click(function(){
          bb++;
          console.log(bb)
        // $(".heard>div").css("left",""+(bb*2.5*-750)+"+px");
        // console.log((bb*-750))
      })
        
    </script>

</body>
</html>